<template>
  <div class="sectionmatch">
    <v-header>
      <div slot="collect" @click="toggleCollect">
        <img :src="isFavorite? Favorited : Favorite" alt="">
      </div>
      <div slot="note" @click="shownote = true">添加笔记</div>
      <div slot="up" @click="submit" v-show="!showAnswer">提交</div>
    </v-header>

    <div class="match-con" v-show="show">
      <p class="con-tit">段落匹配</p>
      <div class="des">
        <div class="des-tit">题干,描述</div>
        <p class="des-txt">{{describe}}</p>
      </div>
      <div class="des-tip">大题内容</div>

      <div class="essay" v-html="this.article"></div>
      <div class="list-box">
        <div class="list-item" v-for="(item,index) in list" :key="index">
          <div class="num">{{index+1}}.</div>

          <!-- 下拉框  判断做题  还是 做题记录  -->
          <el-select size="small" v-if="!showAnswer" v-model="form[item.value]" :placeholder="'Question '+(index+1)">
            <el-option v-for="(opt,ind) in options" :key="ind" :label="opt.label" :value="opt.id"></el-option>
          </el-select>
          <el-select size="small" v-else disabled v-model="sectionAnswer[item.value]" :placeholder="'Question '+(index+1)">
            <el-option v-for="(opt,ind) in options" :key="ind" :label="opt.label" :value="opt.id"></el-option>
          </el-select>

          {{item.title}}
          <div class="tip" v-show="showAnswer">小题讲解: {{item.answer}}</div>
        </div>
      </div>
    </div>

    <!-- 添加笔记 -->
    <van-dialog v-model="shownote" title="复习笔记" show-cancel-button confirm-button-text="保存" :beforeClose="noteBtn">
      <textarea v-model="message" placeholder="要记点什么吗"></textarea>
    </van-dialog>

  </div>
</template>

<script>
import header from '@/components/content/header'
import api from '@/api/api'
import { Toast, Dialog } from 'vant'
import { mapGetters } from 'vuex'

export default {
  name: 'sectionmatch',
  components: {
    "v-header":header,
    [Toast.name]: Toast,
    [Dialog.Component.name]: Dialog.Component,
  },
  data () {
    return {
      isFavorite:false,  // 是否已收藏
      Favorite:require('@/assets/collect.png'),
      Favorited:require('@/assets/collected.png'),
      prevRoute:'',
      message:'',
      describe:'',  //题干 描述
      shownote:false,
      show:false,
      article:'',  //文章
      list:[],   // v-model绑定的值/标题/解析
      options:[],  //v-model下拉选项
      form:{},
    }
  },
  created () {
    this.getMatch()
  },
  computed: {
    ...mapGetters(['showAnswer','sectionAnswer']),
  },
  beforeRouteEnter(to, from, next) {
    // console.log(from)
    next(vm => {
      vm.geturl(from.name)
    })
  },
  methods: {
    getMatch(){
      Toast.loading({message: '加载中...', forbidClick: true});
      api.Sectionmatch().then(res=>{
        Toast.clear()
        this.show = true
        // console.log(res)
        this.describe = res.data.des
        this.article = res.data.article
        this.list = res.data.list
        this.options =res.data.options
        // 动态计算v-model的长度
        let len = this.list.length
        for (let i = 0; i < len; i++) {
          let items= this.list[i]
          this.$set(this.form,items.value,'')
        }
      }).catch(error=>{
        console.log(error)
      })
    },

    // 收藏    没写返回数据给后台
    toggleCollect(){
      if( this.isFavorite ){
        this.isFavorite = false
        Toast('取消收藏')
      }else{
        this.isFavorite = true
        Toast('收藏成功')
      }
    },

    // 添加笔记
    noteBtn(action,done){
      if(action === 'cancel'){
        this.shownote = false
        done()
      }else if (action === 'confirm'){
        if(!this.message){
          Toast("请输入笔记,再保存")
          done(false)
        }else{
          console.log('段落匹配笔记:',this.message)
          this.shownote = false
          this.message = ''
          done()
        }
      }
    },

    // 提交
    submit(){
      Dialog.confirm({message: '是否提交试题?',}).then(() => {
        Toast.success('提交成功')
        setTimeout(() => {
          console.log('段落匹配',this.form)
          this.$store.dispatch("sectionAnswer", this.form)
          this.$router.push({path:'/home/reportsection'})
        }, 2000);
      })
      .catch(() => {
        // 取消
      });
    },

    geturl(url){
      this.prevRoute=url;
      // console.log(this.prevRoute)
      if(url == "readtype"){
        this.$store.dispatch("showAnswer", false)
      }
    }

  },
}
</script>

<style lang="less" scoped>
.match-con{
  margin: 5px 0 40px;
  padding: 10px;
  .con-tit{font-size: 16px;color: #333;line-height: 24px;}
}
.des{
  padding: 6px;
  border: 1px dashed #bbbbbe;
  color: #666;
  margin: 5px 0;
  .des-tit{font-size: 14px;line-height: 20px;}
  .des-txt{font-size: 12px;text-align: justify;line-height: 16px;}
}
.des-tip{font-size: 16px;color: #3291F8;line-height: 24px;}
.essay{
  font-size: 16px;
  text-align: justify;
  line-height: 24px;
  color: #323232;
  margin-top: 15px;
}
.list-box{
  margin-top: 20px;
  .list-item{
    font-size: 16px;
    text-align: justify;
    line-height: 30px;
    color: #323232;
    margin-bottom: 20px;
    .num{display: inline-block;width: 25px;}
    .tip{color: #FF9959;line-height: 24px;font-size: 14px;}
  }
}
textarea{
  font-size: 14px;
  width: 100%;
  white-space: pre-wrap;
  display: block;
  width: 100%;
  height: 100%;
  text-align: justify;
  box-sizing: border-box;
  border: 0;
  resize: none;
  line-height: 24px;
  padding: 10px 10px 10px 20px;
  color: #323232;
  height: 150px;
}
.el-select{
  width: 125px;
}
</style>
